<template>
  <data-time
    v-if="isShowDateTime"
    v-model="value1"
    style="width: 600px"
    type="datetime"
    ref="dateTimeRef"
    :isShowDST="true"
    editable
    placeholder="请选择时间"
    :shortcuts="shortcuts"
    @change="handleChange"
    @focus="handleFocus"
    format="YYYY-MM-DD HH:mm:ss"
    :lang="localLang"
    @getUTC="handleGetUTC"
    @getTimeLabel="handleTimeLabel"
    :disabled-date="disabledDate"
  />

  <el-button @click="handleReSet">重新赋值 {{ $t('hello') }}</el-button>
  <el-button @click="handlePostMsg(), handleChannerlClick()">
    关闭页面 {{ $t('hello') }}
  </el-button>
  <el-button @click="handleChannerlClick()">
    触发broadCastChannel {{ $t('hello') }}
  </el-button>
  <div class="time-wrapper" v-if="false">
    <el-date-picker
      v-model="value2"
      type="datetimerange"
      :shortcuts="shortcuts"
      range-separator="To"
      start-placeholder="Start date"
      end-placeholder="End date"
      @change="handleChange"
    />
  </div>
</template>
<script>
import { h } from 'vue';
import { ElMessageBox, ElButton } from 'element-plus';
import { ElDatePicker } from 'element-plus';
import formComponent from './formComponent.vue';
import moment from 'moment-timezone';
import { localeContextKey } from 'element-plus';
import { useBroadcastChannel } from './broadcastChannel.js';

export default {
  name: 'AboutView',
  components: {
    ElButton,
    ElDatePicker,
  },
  provide() {
    let zh = require('element-plus/lib/locale/lang/zh-cn.js')['default'];
    return { [localeContextKey]: { value: this.lang ? this.lang : zh } };
  },
  setup() {
    let channel = useBroadcastChannel('cross');
    const handleChannerlClick = () => {
      console.log('handleChannerlClick');
      channel.post({
        type: 'message',
        message: '测试channel',
      });
    };
    return {
      handleChannerlClick,
    };
  },
  data() {
    return {
      count: 0,
      lang: null,
      value1: '2024-04-07 02:50:00',
      value2: [new Date(), new Date()],
      shortcuts: [
        {
          text: 'Today',
          value: new Date(),
        },
        {
          text: 'Yesterday',
          value: () => {
            const date = new Date();
            date.setDate(date.getDate() - 1);
            return date;
          },
        },
        {
          text: 'A week ago',
          value: () => {
            const date = new Date();
            date.setDate(date.getDate() - 7);
            return date;
          },
        },
      ],
      // localLang: zh,
      localLang: {
        el: {
          datepicker: {
            now: '此刻',
            today: '今天',
            cancel: '取消',
            clear: '清空',
            confirm: '确定',
            selectDate: '选择日期',
            selectTime: '选择时间',
            startDate: '开始日期',
            startTime: '开始时间',
            endDate: '结束日期',
            endTime: '结束时间',
            prevYear: '前一年',
            nextYear: '后一年',
            prevMonth: '上个月',
            nextMonth: '下个月',
            year: '年xxx',
            month1: '1 月',
            month2: '2 月',
            month3: '3 月',
            month4: '4 月',
            month5: '5 月',
            month6: '6 月',
            month7: '7 月',
            month8: '8 月',
            month9: '9 月',
            month10: '10 月',
            month11: '11 月',
            month12: '12 月',
            weeks: {
              sun: '日',
              mon: '一',
              tue: '二',
              wed: '三',
              thu: '四',
              fri: '五',
              sat: '六',
            },
            months: {
              jan: '一月',
              feb: '二月',
              mar: '三月',
              apr: '四月',
              may: '五月',
              jun: '六月',
              jul: '七月',
              aug: '八月',
              sep: '九月',
              oct: '十月',
              nov: '十一月',
              dec: '十二月',
            },
          },
        },
        name: 'zh-cn',
      },
      isShowDateTime: true,
      disabledDate: (time) => {
        let moreTimeStart = moment('2024-03-26 00:00:00');
        return (
          moreTimeStart.valueOf() > moment(time).valueOf() ||
          moreTimeStart.valueOf() + 1826 * 24 * 60 * 60 * 1000 <
            moment(time).valueOf()
        );
      },
    };
  },
  mounted() {
    window.sharedWorker = new SharedWorker('sw.js');

    window.sharedWorker.port.onmessage = (e) => {
      console.log('e', e);
      if (e.data.type === 'connect') {
        return;
      }
    };
  },
  methods: {
    handlePostMsg() {
      // const data = {
      //   type: 'message',
      //   message: '测试11',
      // };
      // window.sharedWorker.port.postMessage(data);
    },

    handleReSet() {
      this.$i18n.locale = ['en', 'zh'][Math.floor(Math.random() * 2)];
      this.lang = require('element-plus/lib/locale/lang/zh-cn.js')['default'];
      this.lang = require('element-plus/lib/locale/lang/en.js')['default'];
      if (this.count % 2 === 0) {
        this.value1 = moment
          .tz('2024-04-07 02:50:00', null, 'Australia/Sydney')
          .format('YYYY-MM-DD HH:mm:ss');
      } else {
        this.value1 = new Date();
      }
      this.count++;
    },
    handleClick() {
      console.log('xxx', this.value2);
      this.value2 = [new Date(), new Date()];
    },
    handlOpenDialog() {
      this.currentKey = 'xxx';
      this.fromList = [
        { content: '开始时间', value: '1' },
        { content: '结束时间', value: '1' },
      ];
      const changVale = (itemParam) => {
        this.fromList = itemParam;
        console.log('this', this.fromList);
        this.currentKey = new Date().valueOf();
      };
      ElMessageBox.confirm(
        h(formComponent, {
          key: this.currentKey,
          fromList: this.fromList,
          onChange: changVale,
        }),
        {
          title: '确认操作',
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          dangerouslyUseHTMLString: true,
        },
      )
        .then(() => {
          console.log('Confirmed');
        })
        .catch(() => {
          console.log('Cancelled');
        });
    },
    handleChange(value) {
      console.log('handleChange', value);
      this.value1 = value;
    },
    handleFocus(va) {
      console.log('a', va);
    },
    handleGetUTC(resultParam) {
      console.log('handleGetUTC', resultParam);
    },
    handleTimeLabel(resultParam) {
      console.log('handleTimeLabel', resultParam);
    },
  },
};
</script>
<style lang="less" scoped>
.time-wrapper {
  margin: 20px;

  .time-wrapper-popper {
    background: #ff0000;
  }
}
</style>
